const path = require("path")
const HtmlWebpackPlugin = require("html-webpack-plugin")
const { CleanWebpackPlugin } = require("clean-webpack-plugin")

module.exports = {
  entry: "./src/index.ts", // 入口文件
  output: {
    path: path.resolve(__dirname, "dist"), // 打包输出路径
    filename: "bundle.js", // 打包文件名
  },
  // 指定webpack打包时要使用的loader
  module: {
    // 指定要加载的规则
    rules: [
      {
        // 指定规则生效的文件
        test: /\.ts$/, // 以.ts结尾的文件
        use: "ts-loader", // 使用ts-loader处理.ts文件
        exclude: /mode-modules/, // 排除的文件，不进行打包
      },
      {
        test: /\.less$/, // 以.ts结尾的文件
        use: [
          "style-loader",
          "css-loader",
          {
            loader: "postcss-loader",
            options: {
              postcssOptions: {
                plugins: [
                  [
                    "postcss-preset-env",
                    {
                      browsers: "last 2 versions",
                    },
                  ],
                ],
              },
            },
          },
          "less-loader",
        ],
      },
    ],
  },
  // 配置webpack插件
  plugins: [
    new HtmlWebpackPlugin({
      template: "./src/index.html",
    }),
    new CleanWebpackPlugin(),
  ],
  // 设置引用模块
  resolve: {
    extensions: [".ts", ".js"],
  },
}
